<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <el-button type="primary" style="float: right;" size="small" @click="showAdd">添加</el-button>
      </div>
      <el-form :model="searchVo" class="serchBox" size="small" :inline="true">
        <el-form-item label="年份：">
          <el-date-picker
            class="userIntSize"
            v-model="searchVo.year"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
            @change="searChangeYear"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="月份：">
          <el-select class="userIntSize" v-model="searchVo.quarter" clearable placeholder="请选择">
            <el-option
              v-for="item in quarterList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重点工作：">
          <el-cascader
            ref="taskRef"
            class="userIntSize"
            v-model="searchVo.taskId"
            :options="tasksList"
            :props="taskProp"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
        <!-- <el-form-item label="责任单位：">
          <el-cascader
            class="userIntSize"
            v-model="searchVo.departmentId"
            :options="selectdepartmentList"
            :props="departmentProp"
            :show-all-levels="false"
            @change="changeFamily1"
            ref="departmenref"
          >
          </el-cascader>
        </el-form-item>-->
        <el-form-item>
          <el-button @click="search" type="primary" size="small">搜索</el-button>
          <el-button @click="reset" type="primary" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <el-dialog
        :title="addOrWrite ? '添加加减分项' : '编辑加减分项'"
        center
        :close-on-click-modal="false"
        :visible.sync="showAddFormdialog"
        width="550px"
        top="20px"
        @close="cancelForm('taskRef')"
      >
        <el-form ref="taskRef" :model="taskForm" :rules="taskrules" label-width="120px">
          <el-form-item label="发生时间：" prop="year">
            <el-date-picker
              :disabled="isdisabledFn"
              class="userIntSize"
              v-model="taskForm.year"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间"
              @change="changeYear"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="重点工作：" prop="task">
            <el-cascader
              class="userIntSize"
              v-model="taskForm.task"
              :options="tasksList"
              :props="taskProp"
              :show-all-levels="false"
              @change="taskChange"
              ref="tasksref"
            ></el-cascader>
          </el-form-item>

          <!-- <el-form-item label="责任单位：" prop="dtId">
            <el-cascader
              class="userIntSize"
              v-model="taskForm.dtId"
              :options="departmentTypeList"
              :props="targetProp"
              :show-all-levels="false"
              @change="typeChangeDep"
              ref="targetref"
            >
            </el-cascader>
          </el-form-item>-->
          <!-- <el-form-item label="来源：" prop="sourceId">
            <el-select
              class="userIntSize"
              v-model="taskForm.sourceId"
              clearable
              @change="changesourceId"
            >
              <el-option
                v-for="item in sourceList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="分项：" prop="score">
            <el-select
              class="userIntSize"
              v-model="taskForm.score"
              placeholder="分项"
              @change="changeSelsct"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分值：" prop="scoreData">
            <el-input class="userIntSize" v-model="taskForm.scoreData"></el-input>
          </el-form-item>
          <el-form-item label="加减分原因：" prop="description">
            <el-input class="userIntSize" type="textarea" v-model="taskForm.description"></el-input>
          </el-form-item>
          <el-form-item label="附件：" prop="file" class="boxCount">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :on-success="successFile"
              :on-remove="handleDealFileRemove"
              :file-list="fileList"
              multiple
              ref="rebateUpload"
            >
              <el-button size="small" type="success">上传附件</el-button>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="附件：" prop="file" class="boxCount">
            <div class="selectList">
              <el-select v-model="taskForm.fileStr" @change='fileSelsct' clearable placeholder="请选择文件类型">
                <el-option
                  v-for="item in fileStrList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  
                ></el-option>
              </el-select>
              <el-select v-model="taskForm.fileTxt" clearable placeholder="请选择文件">
                <el-option
                  v-for="item in filedata"
                  :key="item.id"
                  :label="fileLists(item.file)"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>-->
          <el-form-item>
            <el-button class="saveBtn" type="primary" @click="submitForm('taskRef')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        width="650px"
        title="附件列表"
        :visible.sync="dialogForm"
        :close-on-click-modal="false"
        @closed="closeDialogs"
      >
        <el-table
          :data="fileTableData"
          border
          style="width: 100%;"
          height="500"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <el-table-column label="附件">
            <template slot-scope="scope">
              <a :href="returnFile(scope.row.file)">{{ scope.row.file }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="fileAddTime" label="上传时间"></el-table-column>

          <el-table-column prop="userName" label="上传人"></el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteFile(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:620px;">
          <el-table
            :header-cell-style="{ background: '#f5f5f5' }"
            border
            height="620px"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column align="center" prop="occurrenceTime" label="日期" width="200"></el-table-column>
            <!-- <el-table-column
              align="center"
              prop="quarter"
              label="月份"
              width="100"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.month }}月</span>
              </template>
            </el-table-column>-->
            <el-table-column align="center" prop="taskName" label="重点工作"></el-table-column>
            <el-table-column prop="score" label="分值" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 1">
                  {{
                  "+" + scope.row.score
                  }}
                </span>
                <span v-else>{{ "-" + scope.row.score }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="加减分原因" align="center"></el-table-column>
            <el-table-column align="center" prop="file" label="附件">
              <template slot-scope="scope">
                <!-- <a v-if="scope.row.fileRoute" :href="uploadUrl+'/'+scope.row.fileRoute">{{fileLists(scope.row.fileRoute)}}</a> -->
                <el-button @click="showfilesData(scope.row)" type="text">查看附件</el-button>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="file" label="附件"></el-table-column> -->
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="showAddWrite(scope.row)">修改</el-button>
                <el-button type="text" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
      <!-- <el-pagination
        background
        style="float:right"
        layout="prev, pager, next"
        :page-size="pagesize"
        :current-page="currentPage"
        :total="total"
        @current-change="pageChange"
      >
      </el-pagination>-->
    </el-card>
  </div>
</template>

<script>
import configJson from "../../api/config";
export default {
  data() {
    return {
      tableData: [],
      taskFormname: [],
      showAddFormdialog: false,
      addOrWrite: true,
      options: [
        {
          id: 1,
          label: "加分",
        },
        {
          id: 2,
          label: "减分",
        },
      ],
      pagesize: 9,
      currentPage: 1,
      total: 0,
      taskrules: {
        year: [{ required: true, message: "内容不能为空", trigger: "change" }],
        quarter: [
          { required: true, message: "内容不能为空", trigger: "change" },
        ],
        name: [{ required: true, message: "内容不能为空", trigger: "change" }],
        task: [{ required: true, message: "内容不能为空", trigger: "change" }],
        target: [
          { required: true, message: "内容不能为空", trigger: "change" },
        ],
        nsScore: [
          { required: true, message: "内容不能为空", trigger: "change" },
        ],
        sourceId: [
          { required: true, message: "内容不能为空", trigger: "change" },
        ],
        taskname: [
          { required: true, message: "内容不能为空", trigger: "change" },
        ],
        score: [{ required: true, message: "内容不能为空", trigger: "change" }],
        description: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        scoreData: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
      quarterList: [
        { id: 1, name: "1月" },
        { id: 2, name: "2月" },
        { id: 3, name: "3月" },
        { id: 4, name: "4月" },
        { id: 5, name: "5月" },
        { id: 6, name: "6月" },
        { id: 7, name: "7月" },
        { id: 8, name: "8月" },
        { id: 9, name: "9月" },
        { id: 10, name: "10月" },
        { id: 11, name: "11月" },
        { id: 12, name: "12月" },
      ],
      sourceList: [],
      sourceListData: [],
      // 列表
      selectdepartmentList: [],
      departmentList: [],
      // 弹框数据
      taskForm: {
        id: "",
        name: "",
        task: "",
        target: "",
        nsScore: "",
        score: "",
        scoreData: "",
        description: "",
        year: "",
        quarter: "",
        taskname: "",
        sourceId: "",
        fileStr: "",
        fileTxt: "",
        files: [],
        leading: "",
      },
      searchVo: {
        year: "2020",
        quarter: "",
        departmentId: "",
        taskDepartmentId: "",
        task: "",
        taskId: "",
      },
      // 选择附件
      fileSize: "",
      uploadUrl: configJson.API_URL + "fileController/uploadFile",
      // uploadUrl:configJson.API_URL+'fileController',
      fileName: "",
      fileUrlEnd: "",
      fileList: [],
      taskList: [],
      tasksList: [],
      taskProp: {
        label: "name",
        value: "id",
        children: "children",
      },
      targetProp: {
        label: "name",
        value: "id",
        children: "departments",
      },
      departmentProp: {
        label: "name",
        value: "id",
        children: "departments",
      },
      targetList: [],
      typeData: [],
      isdisabledFn: false,
      departmentTypeList: [],
      fileStrList: [],
      filedata: [],
      dialogForm: false,
      fileTableData: [],
      fileStr: "",
    };
  },
  methods: {
    check_num: function () {
      // this.taskForm.scoreData = this.taskForm.scoreData.replace(/[^\d]/g, '');
    },
    showfilesData(data) {
      console.log(data, "查看");
      this.dialogForm = true;
      this.fileTableData = data.filess;
      this.fileStr = data.id;
    },
    changesourceId(val) {
      // console.log(val)
      this.sourceList.forEach((i) => {
        if (val == i.id) {
          if (i.type == 3) {
            this.taskForm.score = 1;
          } else if (i.type == 4) {
            this.taskForm.score = 2;
          }
        }
      });
    },
    returnFile(val) {
      return `${configJson.API_URL}/fileController/${val}`;
    },
    deleteFile(val) {
      console.log(val);
      this.$axios
        .post(`/fileController/deleteFileLib`, { id: val.id }, 2)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.$message({
              message: "数据更新成功",
              type: "success",
            });
            this.getData();
            setTimeout(() => {
              this.tableData.forEach((item) => {
                if (item.id == this.fileStr) {
                  this.fileTableData = item.filess;
                }
              });
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 搜索
    fileSelsct(val) {
      this.$axios
        .post("/fileController/getList", { type: val }, 2)
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data);
            this.filedata = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    fileLists(arr) {
      let str = arr.split("/");
      return str.pop();
    },
    changeFamily1(val) {
      if (val) {
        this.searchVo.departmentId = this.$refs[
          "departmenref"
        ].getCheckedNodes()[0].value;
      }
      // this.searchVo.taskDepartmentId='';
      // this.getFamily(val);
    },
    // 获取类别
    getFamily(data) {
      this.$axios
        .post("dept/getAllDepartmentTypeId", { id: data }, 2)
        .then((res) => {
          if (res.code == 200) {
            this.taskFormname = res.data;
            // console.log(this.taskFormname)
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search() {
      this.getData();
      this.getdepartmentList();
    },
    // 重置
    reset() {
      this.searchVo = {
        year: "",
        quarter: "",
        departmentId: "",
        taskDepartmentId: "",
        task: "",
        taskId: "",
      };
      this.getData();
      this.getdepartmentList();
    },
    searChangeYear(val) {
      this.searchVo.year = val;
    },
    getData() {
      let _val = this.searchVo.taskId;
      let _id = "";
      console.log(_val);
      if (!Array.isArray(_val)) {
        _val = [_val];
      }
      _id = _val[_val.length - 1];
      let obj = {
        pageNum: this.currentPage,
        pageSize: this.pagesize,
        year: Number(this.searchVo.year),
        quarter: this.searchVo.quarter,
        departmentId: this.searchVo.departmentId,
        taskId: _id,
      };
      this.$axios
        .post("AwardPunishment/getAllAward", obj)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.total;
            console.log(this.tableData, "删除完");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeYear(val) {
      this.taskForm.year = val;
    },
    gettasksList() {
      this.$axios
        .post("task/getList")
        .then((res) => {
          if (res.code == 200) {
            res.data.map((item) => {
              if (item.children.length == 0) {
                item.children = undefined;
              }
              this.tasksList = res.data;
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 部门列表
    getdepartmentList() {
      this.$axios
        .post("dept/getDepartmentTypeList")
        .then((res) => {
          if (res.code == 200) {
            this.selectdepartmentList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid, "1111");
        if (valid) {
          this.taskForm.files = this.fileList.map((o, i) => {
            return o.response.data;
          }); //获取上传文件名
          let obj = {
            occurrenceTime: this.taskForm.year, //时间
            departmentId: this.taskForm.dtId, //部门ID
            description: this.taskForm.description, //描述
            files: this.taskForm.files, //文件（非必传）
            sourceId: this.taskForm.sourceId, //来源
            score: +this.taskForm.scoreData, //分值
            type: this.taskForm.score, //类型
            fileLibType: 5,
            taskId: this.taskForm.task, //重点工作
            // subtasksId:this.taskForm.target,  //目标任务
          };

          // 编辑
          if (this.taskForm.id) {
            obj.id = this.taskForm.id; //1任务 2指标
            this.updataTask(obj);
          } else {
            //添加
            obj.occurrenceTime = this.taskForm.year; //时间
            this.addTask(obj);
          }
        } else {
          return false;
        }
      });
    },
    updataTask(data) {
      this.$axios
        .post("AwardPunishment/updateAward", data)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("保存成功");
            this.showAddFormdialog = false;
            this.getData();
            // this.getdepartmentList()
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addTask(data) {
      this.$axios
        .post("AwardPunishment/addAward", data)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("添加成功");
            this.showAddFormdialog = false;
            this.getData();
            // this.getdepartmentList()
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showAdd() {
      let day2 = new Date();
      // console.log(date .getFullYear())
      day2.setTime(day2.getTime());
      let s2 =
        day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate();
      this.taskForm.year = s2;
      this.showAddFormdialog = true;
      this.addOrWrite = true;
      this.isdisabledFn = false;
    },
    showAddWrite(data) {
      console.log(data);
      this.addOrWrite = false;
      this.isdisabledFn = true;
      this.taskForm.id = data.id;
      this.taskForm.scoreData = data.score;
      this.taskForm.score = data.type;
      this.taskForm.description = data.description;
      this.taskForm.year = data.occurrenceTime;
      this.taskForm.quarter = data.quarter;
      this.taskForm.task = data.taskId;
      this.taskForm.target = data.tasksId;
      this.taskForm.name = data.dtId;
      setTimeout(() => {
        this.taskChange(data.departmentId);
        this.taskForm.dtId = data.departmentId;
      }, 100);
      this.taskForm.sourceId = data.sourceId;
      this.taskForm.fileStr = data.fileLibType;
      setTimeout(() => {
        this.fileSelsct(data.fileLibType);
      }, 200);
      this.taskForm.fileTxt = data.file;
      this.fileName = data.file;
      setTimeout(() => {
        this.fileSelsct(data.fileLibType);
      }, 250);
      this.taskForm.fileTxt = data.fileId;

      // if(data.file){
      //   let fileStr=data.file.split('/');
      //   this.fileList=[{name:fileStr[fileStr.length-1]}];
      // }
      this.showAddFormdialog = true;
    },
    cancelForm(formName) {
      // this.showAddFormdialog = false;
      (this.taskForm = {
        id: "",
        name: "",
        task: "",
        target: "",
        nsScore: "",
        score: "",
        scoreData: "",
        description: "",
        year: "",
        quarter: "",
        taskname: "",
        sourceId: "",
        files: [],
        fileTxt: "",
      }),
        this.$refs[formName].resetFields();
      this.fileList = [];
      this.fileName = "";
    },
    closeDialogs() {},
    del(data) {
      this.$confirm("此操作将删除该区域, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("AwardPunishment/deleteAward", { id: data.id }, 2)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.getData();
                // this.getdepartmentList()
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((e) => e);
    },
    pageChange(page) {
      this.currentPage = page;
      this.getData();
    },
    changeSelsct(data) {
      this.taskForm.score = data;
    },
    //选择附件
    successFile(response, file, fileList) {
      if (response.code == 200) {
        let fileUrlStr = this.uploadUrl.split("/");
        let fileRemoveChl = fileUrlStr.slice(0, fileUrlStr.length - 1);
        this.fileUrlEnd = fileRemoveChl.join("/");
        this.fileName = this.fileUrlEnd + "/" + response.data;
        this.fileList = fileList;
      }
    },
    handleDealFileRemove(file, fileList) {
      this.fileName = "";
    },
    uploadExceed(files, fileList) {
      this.$set(fileList[0], "raw", files[0]);
      this.$set(fileList[0], "name", files[0].name);
      this.$refs["rebateUpload"].clearFiles(); //清除文件
      this.$refs["rebateUpload"].handleStart(files[0]); //选择文件后的赋值方法
      this.fileName = this.fileUrlEnd + "/" + files[0].name;
    },
    // 来源
    getsourceList() {
      let strArr = new Promise((resolve, reject) => {
        this.$axios.post("negativeSource/getAllSource?id=" + 3).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          }
        });
      });
      let strArr1 = new Promise((resolve, reject) => {
        this.$axios.post("negativeSource/getAllSource?id=" + 4).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          }
        });
      });
      Promise.all([strArr, strArr1]).then((resultList) => {
        var data = [];
        resultList.map(function (value, index, array) {
          data = data.concat(value);
        });
        // console.log(data)
        this.sourceList = data;
      });
      // this.$axios.post("negativeSource/getAllSource?id="+3).then(res => {
      //   if (res.code == 200) {
      //     this.sourceList = res.data;
      //   }
      // })
      // .catch(err => {
      //   console.log(err);
      // });
    },
    // getsourceListData(){
    //   this.$axios.post("negativeSource/getAllSource?id="+3).then(res => {
    //     if (res.code == 200) {
    //       this.sourceListData = res.data;
    //     }
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
    // },
    // 选择来源获取扣分值
    sourChange(val) {
      for (let i = 0; i < this.sourceList.length; i++) {
        if (this.sourceList[i].id == val) {
          this.dutyFrom.nsScore = this.sourceList[i].score;
        }
      }
    },
    taskChange(val) {
      let _val = val;
      if (_val) {
        if (!Array.isArray(_val)) {
          _val = [_val];
        }
        this.taskForm.task = this.$refs["tasksref"].getCheckedNodes()[0].value;
        console.log(this.taskForm.task);
        this.taskForm.target = "";
        this.taskForm.name = "";
        this.taskForm.taskname = "";
        let _id = _val[_val.length - 1];
        this.tasksList.forEach((item, index) => {
          if (item.id == _id) {
            this.taskForm.leading = item.departmentName;
          }
          if (item.children != null || item.children != undefined) {
            if (item.children.length != 0) {
              item.children.forEach((i) => {
                if (i.id == _id) {
                  this.taskForm.leading = i.departmentName;
                }
              });
            }
          }
        });
        this.$axios
          .post("/dept/getAllDepartmentT", { id: this.taskForm.task }, 2)
          .then((res) => {
            if (res.code == 200) {
              this.departmentTypeList = res.data;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    targetChange(val) {
      if (val) {
        this.taskForm.target = this.$refs[
          "targetref"
        ].getCheckedNodes()[0].value;
      }
      this.$axios
        .post("/dept/getAllDepartmentT", { id: this.taskForm.target }, 2)
        .then((res) => {
          if (res.code == 200) {
            let result = [];
            let obj = {};
            for (let i = 0; i < res.data.length; i++) {
              if (!obj[res.data[i].departmentTypeId]) {
                result.push(res.data[i]);
                obj[res.data[i].departmentTypeId] = true;
              }
            }
            // console.log(result)
            this.departmentList = result;
            this.typeData = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    typeChangeDep(val) {
      if (val) {
        this.taskForm.dtId = this.$refs["targetref"].getCheckedNodes()[0].value;
      }
      let arr = [];
      for (let i = 0; i < this.typeData.length; i++) {
        let obj = {};
        if (val == this.typeData[i].departmentTypeId) {
          obj["departmentName"] = this.typeData[i].departmentName;
          obj["departmentId"] = this.typeData[i].departmentId;
          arr.push(obj);
        }
      }
      this.taskFormname = arr;
      console.log(this.taskFormname);
    },
    getfileList() {
      this.$axios
        .post("/fileLibTypeController/getList")
        .then((res) => {
          if (res.code == 200) {
            this.fileStrList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getData();
    this.getdepartmentList();
    this.getsourceList();
    this.gettasksList();
    this.getfileList();
  },
};
</script>
<style scoped>
.userIntSize {
  width: 80% !important;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
.selectList {
  display: flex;
}
.boxCount {
  width: 84%;
}
</style>
